import React, { useDeferredValue,useMemo,useEffect, useState, memo } from 'react'

let i =0;

const List = memo(function({count}) {
  const [data, setData] = useState([])

  useEffect(() => {
    const arr = []
    arr.length += 5000
    for (let i = 0; i < arr.length; i++) {
      arr.fill(i+1, i)
    }
    setData(arr)

  }, [count])

  return (
    <div>
      {
        data.map((item) => {
          return (
            <p key={item}>{count}</p>
          )
        })
      }
    </div>
  )
})

export default function UseDeferredValueDemo() {
    
  const [inpVal, setInpVal] = useState('')
  
  const deferredValue = useDeferredValue(inpVal)
  
  const memoList = useMemo(() => <List count={deferredValue}></List>, [deferredValue])
  
  return (
    <>
      <h1>UseDeferredValue</h1>
      <input type="number" value={inpVal} onChange={(e) => setInpVal(e.target.value)}/>
      {memoList}
    </>
  )
}